<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<div class="place-order margin-all padding-vertical">
	<h1>Set Order Payment</h1>
  		<form action="/dms/order-review.html" name="dms-select-payment-form" class="form formalize ${param.mode}" method="post">
  			<input type="hidden" name="selectPayment" id="selectPayment"/>
    		<div class="section">
    			<div class="title float-left full-width padding-vertical">
    				<div class="float-left margin-left font-16 font-white capitalize">4.  Select your payment</div>
    			</div>
    			<div class="clear-both"></div>
	    		<div class="margin-all margin-left-dbl">
					<div class="errContainer font-12 errorMsg no-margin-left">
						<label for="selectPayment" class="error"></label>
					</div>    			
	    			<div class="full-width float-left card-listing">
	    				<span class="credit-card margin-bottom">
	    				<div class="block card id float-left"></div>
	    				<div class="float-left card type">Type</div>
	    				<div class="float-left card number">Card Number</div>
	    				<div class="float-left card exp-date">Exp. Date</div>
	    				<div class="float-left card name">Name</div>
	    				<div class="card trash  float-left "></div>
		    			<div class="clear-both"></div>
	    				</span>
	    			<c:forEach items="${user.creditCards}" var="cc" varStatus="status">
	    				<span class="credit-card">
	    				<input type=radio value="${cc.id}"  name="cardId" id="cardId" class="block card id float-left" />
	    				<div class="float-left card type"><c:out value="${cc.type}"/></div>
	    				<c:set var="lenthOfAccountNumber" value="${fn:length(cc.accountNumber)}"/>
	    				<c:set var="startIdx" value="${lenthOfAccountNumber-4}"/>
	    				<c:set var="endIdx" value="${lenthOfAccountNumber}"/>
	    				<%--display last 4 digits of credit card acct. no. --%>
	    				<div class="float-left card number"><c:out value="xxxx-${fn:substring(cc.accountNumber,startIdx,endIdx)}"/></div>
	    				<div class="float-left card exp-date"><fmt:formatDate value="${cc.expirationDate }" pattern="MM/yy"/></div>
	    				<div class="float-left card name"><c:out value="${cc.nameAppearedOnCard}"/></div>
	    				<div class="card trash  float-left "><div class="btn"><i class="icon-trash icon-large"></i></div></div>
		    			<div class="clear-both"></div>
	    				</span>
	    			</c:forEach>
	    			</div>
				</div>
	    		<div class="clear-both"></div>
	    		<div class="input-item">
		    		<label class="block float-left font-15 bold">Amount: </label>
					<div class="margin-vertical float-left font-15 bold">$<input type="text" value="${order.price}" name="amount" id="amount" class="no-border" readonly/></div>
					<%--
					<div class="margin-vertical float-left font-15 bold"><fmt:formatNumber type="currency" value="${order.price}"/></div>
					 --%>
	    		</div>
	    		<div class="clear-both"></div>
	    		<div class="clear-both"></div>
				<div class="input-item margin-horizontal-dbl margin-top">
					<div id="add-a-credit-card" class="block margin-left-half font-white btn btn-success float-left"><i class="icon-plus-sign-alt"></i> 
						<span>Add a credit card</span>
					</div>
    			</div>
	   		</div>
	   		<div class="clear-both"></div>
    		<div class="margin-left-dbl">
    		<a href="<c:url value="/place-an-order.html"/>">
    			<button type="button">Modify order</button>  
    		</a>
    		<input type="submit" value='Order review' />	   		
    		</div>
  		</form>
</div>
	<div id="add-credit-card-box" class="">
		<jsp:include page="/WEB-INF/modules/creditcard-form.jsp" flush="true">
			<jsp:param name="" value=""/>
		</jsp:include>
	</div>
	<div class="credit-card-entry-template">
		<span class="credit-card hide">
			<input type=radio value="${cc.id}"  name="cardId" id="cardId" class="block card id float-left" />
			<div class="float-left card type"><c:out value="${cc.type}"/></div>
			<c:set var="lenthOfAccountNumber" value="${fn:length(cc.accountNumber)}"/>
			<c:set var="startIdx" value="${lenthOfAccountNumber-4}"/>
			<c:set var="endIdx" value="${lenthOfAccountNumber}"/>
			<%--display last 4 digits of credit card acct. no. --%>
			<div class="float-left card number"><c:out value="xxxx-${fn:substring(cc.accountNumber,startIdx,endIdx)}"/></div>
			<div class="float-left card exp-date"><fmt:formatDate value="${cc.expirationDate }" pattern="MM/yy"/></div>
			<div class="float-left card name"><c:out value="${cc.nameAppearedOnCard}"/></div>
			<div class="card trash  float-left "><div class="btn"><i class="icon-trash icon-large"></i></div></div>
  			<div class="clear-both"></div>
 		</span>	
	</div>
  <script type="text/javascript" src="/dms/javascript/set-order-payment.js"></script>